Я рос в семье военных: отец, мама, брат, муж сестры работали в силовых структурах. Теперь ещё и я. Не то чтобы у меня не было выбора — меня никто не заставлял и не «пропихивал» на службу. Когда заканчивал 11 класс, бегал с огромными глазами, как и все, думал, что дальше делать и куда идти. Мой отец по специальности инженер-электрик, и раньше я часто ездил к нему на работу, помогал и смотрел, как что работает. Заинтересовался.  

Однажды отец рассказал, что в академии РВСН им. Петра Великого есть энергетическая специальность, и предложил попробовать. Меня никто не заставлял — я подавал документы и в гражданские вузы: МГСУ, МЭСИ, ещё куда-то.

У детей военных, которые служат сейчас, есть хотя бы минимальное понимание происходящего в армии. А мои родители в возрасте, на пенсии, и то, что было во времена их службы, уже неактуально. И они живут тем временем — отец до сих пор убежден в псевдостабильности. Думает, что в армии всё супергуд и не слишком поменялось с его службы. Поэтому получилось, что я поступал в академию, имея устаревшие представления об армии. А когда начал сам в этом котле вариться — разочаровался. Пообщался с офицерами и понял, что немногие работают по своей специальности. Нам прямо говорили — какая должность будет свободна, ту вами и «заткнут». Увидел, как военные уезжают в поля и месяц не видят семью. Многие говорят, что армию испортили деньгами, нередко кого-то подсиживают и всё такое. Не захотел вариться во всём этом. Понял, что не моё, и начал искать себя в другой стезе. Уйти оказалось непросто — в меня вцепились и до сих пор не хотят отпускать.

Я уже закончил академию, работаю по распределению в Тагиле. Военная служба меня не устраивает уже давно: сейчас я на особом режиме, но есть ребята, которые уезжают в поля и две недели их нет дома. И я думаю — оно мне надо? Кажется, нет. 

Пытался отчислиться ещё в академии, но у меня ничего не вышло. Наше министерство обороны считает тебя обязанным, если ты учился бесплатно. Хочешь уволиться — плати за обучение. Если ты учишься гражданском университете по целевому направлению, легко можешь написать заявление на отчисление, и тебе скажут: «Ну ок, плати и уходи». А в военке тебе говорят «Будешь платить деньги, но мы тебя все равно не отпустим». Я доучился и вот уже два месяца пытаюсь уволиться, но мне говорят «Подумай, может еще послужишь? А кто будет родину защищать?». В общем, уйти из армии тяжко.

На третьем курсе академии я заметил, что востребованы профессии, связанные с диджитал. Пробовал заняться рекламой, даже посидел на одной работе, не понравилось. Потом пробовал программирование, но тоже не не заинтересовало. Даже пошел в школу архитектуры  и дизайна в Москве, на курсы по Photoshop, Indesign и другим редакторам. Так и не доучился, школа не понравилась. Но сама сфера дизайна понравилась — понял, что это интересно и есть возможность зарабатывать. Начал искать другие курсы, наткнулся на GeekBrains и подумал: раз это школа от Mail.ru, значит должна быть хорошей. Пошёл учиться, и на втором месяце занятий приключилась история с ноутбуком. 

Мы были на пятом курсе в академии, жили в общежитии. Нужно сказать, что в военных учреждениях есть служба защиты гостайны (ЗГТ), и в связи с этим личный ноутбук — серьёзная тема. Всё командование знало, что у нас есть ноутбуки, но не подавало виду — выпускной курс, их трогать не надо, им надо дипломы писать. Но я-то был «рецидивист». Мы увольнялись, пытались отчислиться, нам делали мозги. Я уже учился на курсах веб-дизайнера, и офицеры об этом знали.

В один прекрасный момент меня вызывает начальник, говорит: «Будешь увольняться?» Да, говорю. Тут он достает мой ноут — пока меня не было в комнате, они провели обыск — и вызывает офицера из службы ЗГТ. Говорит: «Изымаем, описываем». Понятно, что у нас на ноутах ничего подозрительно не было, но вообще если находят какую-то запрещенную информацию, это грозит последствиями вплоть до уголовки. Было стрёмно. 

Я написал куратору Geekbrains, объяснил ситуацию. Сказал, что нет возможности учиться, и спросил, какие есть варианты. Предыдущий курс я уже полностью оплатил, и куратор ответил, что меня проще перевести на другой поток через несколько месяцев. Так и сделали. Ноутбук мне к тому времени вернули.

Ещё во время учёбы в академии редко, но были проблемы с просмотром вебинаров. Всё устроено так, что задачу поступают сверху, потом спускаются до курсантов и мы сами между собой решаем, кто их выполняет. Когда ты в кругу сверстников, всё проще. Говоришь: «Ребята, у меня тут курсы, за которые я отдал бабки. Давайте я в следующий раз раз схожу, а сегодня у меня занятие». Все относились с пониманием. 

Но был другой случай, как раз после того, как меня перевели на другой поток курсов. Мы уехали на стажировку академии на месяц в Йошкар-Олу, и, естественно, я не мог взять с собой ноутбук. Я тогда уже общался с преподавателем Ильей Полянским, и он посоветовал книги, которые нужно прочитать во время стажировки: «Интерфейс» Алана Купера , «Типографика» Эмиля Рудера, «Новая типографика» Яна Чихольда. В общем, я действовал по собственной программе, а курс нагнал, когда приехал домой.

Как я уже сказал, во время учебы начали общаться с Ильей Полянским — сначала по учебе, потом по работе. Дома у меня было достаточно много свободного времени, и я попросил Илью давать мне дополнительные задания, чтобы подтягивать навыки, которые провисают. Он тогда работал в «Инвитро», и там как раз освободилась вакансия дизайнера. Я поинтересовался, что нужно сделать, чтобы попасть туда, Илья накидал теоретические вопросы, которые надо подтянуть. После этого он начал давать тестовые проекты, которые мы сделали вместе.

В итоге Илья дал мне работу в «Инвитро и подтянул ещё в «Ситимобил». В «Инвитро» мы занимались продуктовым дизайном, в «Сити» — коммуникационным. В первом случае переходили на новую дизайн-систему, собирали в соответствии с ней страницы, адаптировали под мобилы. А в «Ситимобил» я с дизайнерами и сммщиками полностью вел соцсети — все рекламные кампании в ВК и Инсте. Плюс у них тогда был проект по «Игре престолов»: выходил последний сезон, и я как раз только пришел в компанию и мы рисовали материалы по сериалу. 

Когда я выпустился из академии, курсы ещё не закончились. Я поехал в отпуск, и буквально за две недели случилось сразу два очень неприятных для меня события. «Ситимобил» расширили штат, им стало невыгодно работать с удаленщиками, и меня уволили. А в «Инвитро» пришел новый маркетинговый директор. Она сказала, что они больше не работают с частными лицами, а только с компаниями, и сократила весь отдел дизайна. Я остался без работы буквально в течение недели. 

Мы с Ильей продолжали общаться, он подкидывал мне сторонние проекты. Один из крупных — компания «ЛеонМед», они занимаются поставками медоборудования. Илья подкинул мне задачу: сделать презентацию нового оборудования для новых клиентов. С этой компанией работаем до сих пор. Ещё немного поработал в «Альфа-Банке» в коммуникационном дизайне. Им не хватало рук, а я был без работы, и мне подкинули несколько проектов по анимации в соцсетях. Ещё как-то делали заказ для Высшей школы экономики, рисовали им баннеры в соцсети для новых программ обучения. С ВШЭ работаем до сих пор.

Поработал я немного, порисовал, отпуск закончился, и я поехал по распределению академии в Тагил. Здесь стало прям хорошо: Надя Владимирская, наставник на курсах, подкинула мне стажировку в Amber Light, и я до сих пор работаю с этой студией. Надя вообще помогает нам искать работу, сбрасывает в общий чат вакансии. Потом взяли ещё в студию Near, тоже на удаленке и по коммуникационному дизайну. Сейчас намечается ещё кое-что продуктовое.

Проблемы на курсе были не только из-за военной академии. Помню, у меня никак не ладилось с фотошопом. Тогда поставил себе челлендж — рисовать по баннеру в день. Потихоньку выросли руки из нужного места, и я начал мониторить вакансии в ВК и на hh.ru. Помню, тогда в ВК написал парень, сказал, что ему нужен дизайнер-стажер для проекта на Тильде. Преподаватель Артур Громадин тогда тоже делал какой-то проект на Тильде, и я работал с ним. На hh.ru я тоже находил какие-то интересные проекты, но был скромен в профессиональном плане, и меня просто не брали. Один фитнес-клуб написал, что постоянной работы нет, но если что-то будет — напишут, и потом пару раз подкидывали работу по баннерам. 

Вообще работодатели смотрят не на сертификаты, а что ты реально умеешь. Можно сказать, что проходил где-то стажировку, но это всё условно. С Ильёй недавно разговаривали на эту тему. На формальное образование мало кто смотрит, если ты сам научился — молодец. Сейчас многие студии гонятся за просмотрами и лайками в Instagram, Dribbble и Behance, при этом абсолютно забивают на пользователя. Им не так важно, чтобы продукт был хороший, как то, чтобы дизайн привлек внимание общественности.

Пока живу в Тагиле, но планирую переезжать обратно в Москву и устроиться дизайнером в штат. Сейчас работаю по всем проектам на удалёнке. Когда прилетают правки, бегу исправлять, весь в мыле — мало ли что, может, кому-то срочно надо. Боялся, что по шапке прилетит, пока мне не сказали: «Чувак, это не армия. Здесь все адекватно относятся ко всему». Есть у меня армейский принцип «умри, но сделай». Это не то чтобы плохая установка, но в таком виде она явно гиперболизирована. Наверное, так проявляется профдеформация.

Наверняка вам знакома такая ситуация: пользователи посещают ваш сайт или веб-приложение, просматривают его до определенного момента, после чего закрывают вкладку и уходят навсегда. 

Конечно, причин для такого поведения может быть множество. Пользователю может не понравиться дизайн вашего продукта, его может не устроить цена на услуги, а информация — показаться неполной. Однако бывает и так, что уходит определенно «ваш» клиент: не потому, что его не заинтересовало ваше предложение, а потому, что первое впечатление от вашего сервиса оставило его разочарованным. В этом случае мы говорим, что главным фактором потери клиента стал неправильно настроенный, плохой или вовсе отсутствующий онбординг. 

Как же избежать подобных ситуаций и не отпугнуть клиентов после их первого контакта с вашим продуктом?

Онбординг — что это и зачем он нужен?

Онбординг (англ. onboarding — «введение, размещение, адаптация») — это термин, который уже достаточно распространен в сфере HR и означает механизм, с помощью которого новые сотрудники приобретают необходимые знания и навыки для эффективной работы в компании. Для рекрутеров данный процесс обычно подразумевает совокупность лекций, презентаций и обучающих программ — все то, что может помочь новичкам быстрее освоиться на рабочем месте и влиться в жизнь организации.

Примерно та же ситуация происходит, когда мы говорим о знакомстве пользователей с технологиями и новым программным обеспечением. Здесь онбординг означает виртуальное сопровождение и поддержку новых пользователей на каждом этапе пути. Когда посетитель впервые попадает на сайт и решает ознакомиться с ним, именно от грамотно настроенного онбординга зависит то, станет ли этот человек клиентом сервиса, научится ли он пользоваться продуктом — или уйдет, так и не разобравшись, что же ему пытались предложить.

Но разве новый пользователь не может разобраться с навигацией сайта или функциями приложения самостоятельно, методом проб и ошибок? Правильный ответ: нет.

С каждым годом интернет-сервисы становятся все сложнее, их используют для совершенно разных целей: от покупки и продажи товаров до управления бизнесом и финансами. Конкуренция на рынке услуг становится все выше, а привлечение клиентов — дороже. Соответственно, чем быстрее посетитель сайта адаптируется к его интерфейсу, узнает о его возможностях — тем выше вероятность, что он совершит целевое действие и будет обращаться к тому же продукту в будущем. Что совершенно недопустимо — так это бросать пользователя в «пустом» пространстве сайта, не объяснив, какие шаги ему следует предпринять для эффективной работы.

Помните: нужно не просто рассказать новому пользователю о продукте, а наиболее простым способом донести то, как он сможет удовлетворить свою боль и решить свои проблемы с помощью продукта.

Инструменты онбординга

Теперь, когда мы немного разобрались с терминологией, перейдем к анализу инструментария, которым может располагать онбординг — от наиболее популярных и частых решений до не совсем очевидных.

Всплывающие подсказки (Tooltips) 

Самый распространенный элемент онбординга пользователей, который активно используется при работе и с веб-сайтами, и с мобильными приложениями, и с программным обеспечением в целом — это всплывающие подсказки. Каждый пользователь ПК хотя бы раз сталкивался с таким типом подсказок, вспомните хотя бы Скрепыша:

Первый интерактивный помощник от Microsoft Office

Более современный пример подсказок на сайте:

Подсказки от Facebook

Всплывающие окна (Pop-up) 

Инструмент, который нередко используется на сайтах как эквивалент подсказок — это popup-окна, всплывающие над всей страницей. Они преследуют ту же цель, что и тултипы — тем не менее, злоупотреблять этим инструментом не стоит, так как поп-апы зачастую отвлекают пользователей от работы с сайтом или кажутся чересчур навязчивыми.

Интерактивные туры

Тур по продукту — это совокупность сразу нескольких всплывающих подсказок и/или попап-окон, которые появляются по мере продвижения пользователя по сайту и могут переключаться при помощи кнопки «Далее». Обычно, если пользователю не нужна подобная «экскурсия», он может отключить интерактивный тур, нажав на крестик (некоторые сайты используют кнопку «Все понятно!»). Иногда в этот инструмент также входит вступительный видеоролик с пояснениями о функционале интернет-ресурса.

Тур по панели инструментов 

Обучающий видео-ролик, встроенный в попап-окно

Пустые состояния 

Этот неочевидный инструмент буквально представляет собой пустую интернет-страницу: это может быть альбом, в который пока не добавлены фотографии, стена в социальной сети, где еще нет записей, страница ошибки, когда по запросу пользователя не удалось найти ответа. Однако эту пустоту можно выгодно использовать, если заменить ее призывом пользователя к действию: «Упс, здесь пока ничего нет... Создайте свой проект!»

Пример пустого состояния

Шкалы прогресса 

Шкала прогресса встречается в мобильных приложениях чаще, чем на веб-сайтах, однако также может быть довольно эффективным методом онбординга. Она показывает пользователю, какую часть работы с сайтом он уже проделал — и мотивирует его на дальнейшие свершения:

Шкала прогресса рекрутингового сайта 

Рассылки (или Lifecycle-рассылки) 

Данный инструмент отличается от предыдущих тем, что он не встроен непосредственно в интерфейс сайта, но тем не менее играет значительную роль в онбординге пользователей.  Lifecycle-рассылка — это цепочка писем, обучающих пользователя эффективной работе с продуктом:

Пример обучающего письма от конструктора сайтов

Как настроить онбординг под пользователя?

Подсказки и интерактивные туры — это хорошо. Но для того, чтобы они сработали и привели к желаемому результату, необходимо на этапе настройки онбординга ответить на следующие вопросы:

• На какую аудиторию рассчитан продукт?
• Какую проблему пользователя должна решить работа с ним? 
• Какой цели пользователь хочет достичь в итоге?

Посетители приходят на сайт, потому что они предполагают найти на нем нужную информацию, получить услугу или инструмент. Однако запросы пользователей отличаются в зависимости от их сферы деятельности, возраста, интересов, потребности в продукте (единоразовое взаимодействие / регулярная работа с продуктом) и т.д. Следовательно, для того, чтобы грамотно настроить онбординг, понадобится собрать максимально подробные данные о клиентах. Здесь помогут открытые опросы, тестирования и фокус-группы. В итоге нужно представлять, какой путь будет проходить пользователь от первого взаимодействия с ресурсом до полного погружения в работу. 

Неуместные или чересчур банальные подсказки (например, «Нажмите кнопку «Загрузить файл», чтобы загрузить файл») не помогут пользователям, а, напротив, запутают их или вызовут отторжение. Также не следует перегружать сайт всплывающими окнами, стрелочками и прочими отвлекающими объектами — онбординг должен дополнять страницу, с который работает пользователь, а не усложнять интерфейс еще сильнее. В противном случае, внимание потенциального клиента рассеется, и он уйдет с сайта, не сумев добраться до нужной ему цели.

Примеры сайтов с хорошим онбордингом пользователей

Duolingo — это бесплатная платформа для изучения иностранных языков, которая известна по всему миру. Ее онбординг включает в себя не только знакомство с функционалом сайта или мобильного приложения — в процессе прохождения интерактивного тура пользователь должен указать свои сферы интересов, потребности и цели. Это позволяет платформе обеспечить индивидуальный подход и составить эффективную учебную программу:

Pinterest (Пинтерест) — это фотохостинг, где пользователи могут добавлять изображения в свои онлайн-коллекции, составлять собственные тематические «доски» и делиться идеями. Онбординг в данном случае обучает пользователей работе с платформой и определяет сферы их интересов, чтобы подобрать нужный контент:

Онбординг поверх сайта

Самая большая сложность, возникающая при настройке онбординга пользователей, заключается в том, что этот процесс требует немалых затрат. Ведь на разработку сайта и так уже было потрачено много человеко-часов на разработку — а теперь нужно еще и настраивать онбординг на основе потребностей клиентов. Ситуацию усугубляют обновления продукта и появление в нем новых функций, новых разделов на сайте.

Здесь есть решение, которое не потребует особых дополнительных затрат — онбординг не в структуре самого сайта, а «поверх» него. Как, например, у Experrto.io —  конструктора интерактивных подсказок, который не требует знаний верстки, дизайна и программирования. 

Experrto представляет собой расширение для браузера Google Chrome и состоит из редактора и личного кабинета. С его помощью можно создавать всплывающие подсказки, прикреплять их к нужным элементам интерфейса, а также анализировать, насколько успешно пользователи продвигаются по составленному для них сценарию —  видеть количество запусков онбординга, завершения каждого шага и итоговую конверсию:

Статистика онбординга в личном кабинете Experrto

Расширение доступно в интернет-магазине Google, и, пока оно находится в стадии открытого тестирования, его можно попробовать бесплатно.

Подведем итоги

Учитывая уровень, на который вышли интернет-сервсиы сегодня, без онбординга обойтись сложно. К сожалению, универсального решения здесь не существует — приходится учитывать множество факторов и особенностей в зависимости от специфики каждого сайта и его целевой аудитории. Можно потратить ресурсы на дополнительную разработку туров, всплывающих окон и подсказок, но, скорее всего, на старте проекта, в условиях ограниченных бюджетов, будет разумнее распределить ресурсы иначе и попробовать воспользоваться готовым решением вроде Experrto. Конечно, выбирать свой путь нужно в зависимости от конкретных обстоятельств; главное — помнить о том, как сегодня важно умение встретить пользователя на своем ресурсе.

Онбординг — это лишь одна из множества важных тем, в которых необходимо разбираться современному веб-дизайнеру. Для того, чтобы все системно изучить, будет полезно пройти полноценный курс — например, на факультете веб-дизайна GeekUniversity. Новый поток начнется в ближайшие дни — отличная возможность не откладывать в долгий ящик ;)